<template>
	<view class="userContainer">
		<view class="navBarContainer">
			<view class="navBar">
				<view class="back" @click="goBack">
					<view class="iconContainer">
						<u-icon name="arrow-left" size="20"></u-icon>
					</view>
				</view>
				<text class="title">登录</text>
				<view class="other">
					
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="loginContainer">
			<view class="username">
				<u-input placeholder="用户名" shape="circle"
				customStyle="backgroundColor:#FFF" v-model="username">
					<u-text
						text="用户名"
						slot="prefix"
						margin="0 3px 0 0"
						type="tips"
					></u-text>
				</u-input>
			</view>
			<view class="password">
				<u-input placeholder="密码" shape="circle"
				customStyle="backgroundColor:#FFF" v-model="password" v-if="showPassword==false" type="password">
					<u-text
						text="密码"
						slot="prefix"
						margin="0 3px 0 0"
						type="tips"
					></u-text>
					<view slot="suffix" class="inactiveEye" @click="showPassword=!showPassword"></view>
				</u-input>
			</view>
			<view class="password">
				<u-input placeholder="密码" shape="circle"
				customStyle="backgroundColor:#FFF" v-model="password" v-if="showPassword==true">
					<u-text
						text="密码"
						slot="prefix"
						margin="0 3px 0 0"
						type="tips"
					></u-text>
					<view slot="suffix" class="activeEye" @click="showPassword=!showPassword"></view>
				</u-input>
			</view>
			<view class="login" @click="gotoHome">
				登录
			</view>
		</view>
		<view class="warning">
			还未注册？<view class="reg" @click="gotoReg">立即注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				password:'',
				showPassword:false
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			gotoReg(){
				uni.navigateTo({
					url:'./gotoReg'
				})
			},
			gotoHome(){
				uni.request({
					url:'http://localhost:8080/kfc/user/user/login',
					method:'post',
					data:{
						username:this.username,
						password:this.password
					},
					success:(res)=>{
						console.log(res.data)
						uni.setStorageSync('STATE_KEY',res.data.data)
						this.$refs.uToast.show({
							type: 'success',
							title: res.data.msg,
							message: "登录成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
							complete(){
								uni.navigateTo({
									url:'./homePage'
								})
							}
						})
					},
					fail:(res)=>{
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '登录失败',
							message: res.data.msg,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: rgb(247,247,247);
	}
</style>

<style lang="scss" scoped>
	.userContainer{
		.navBarContainer{
			width: 100vw;
			height: 200rpx;
			position: fixed;
			z-index: 99;
			top:0rpx;
			left: 0;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 30rpx;
			.navBar{
				width: 90%;
				margin: 0 auto;
				margin-top: 100rpx;
				background-color: #FFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.back,.other{
					width: 70rpx;
				}
				.title{
					font-size: 30rpx;
				}
			}
		}
		.loginContainer{
			margin-top: 500rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			>view{
				width: 500rpx;
			}
			.username{
				margin-bottom: 20rpx;
			}
			.password{
				.inactiveEye{
					width: 32rpx;
					height: 32rpx;
					background-image: url(../../static/login/inactiveEye.png);
					background-position: center;
					background-size: contain;
					margin-right: 30rpx;
				}
				.activeEye{
					width: 32rpx;
					height: 32rpx;
					background-image: url(../../static/login/activeEye.png);
					background-position: center;
					background-size: contain;
					margin-right: 30rpx;
				}
			}
			.login{
				display: flex;
				align-items: center;
				justify-content: center;
				color:#FFF;
				background-color: rgb(228,0,48);
				margin-top: 30rpx;
				height: 60rpx;
				border-radius: 30rpx;
			}
		}
		.warning{
			width: 100vw;
			margin-top: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color:#999999;
			font-size: 26rpx;
			.reg{
				color:rgb(228,0,48)
			}
		}
	}
</style>
